<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>祝福弹窗动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "STKaiti", "SimKai", "KaiTi", serif;
        }
        
        body {
            overflow: hidden;
            height: 100vh;
            background-color: #f0f0f0;
        }
        
        .blessing-box {
            position: absolute;
            width: 180px;
            height: 90px;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: all 0.5s ease-out;
            z-index: 10;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <script>
        // 祝福语句列表
        const blessings = [
            "❀ 万事如意！", "❤ 心想事成！", "★ 前程似锦！", "✾ 幸福安康！", "♦ 好运连连！",
            "✧ 笑口常开！", "✦ 财源广进！", "✽ 事业有成！", "♫ 快乐每一天！", "✿ 福星高照！",
            "♯ 心愿成真！", "☀ 平安喜乐！", "✈ 步步高升！", "✪ 吉祥如意！", "☽ 梦想成真！",
            "★ 记得吃早饭", "✽ 别不开心", "☘ 都会好起来的", "✿ 没事的，没事的", "✪ 你是最棒的",
            "✽ 注意保暖", "☀ 做自己就好", "❤ 爱人先爱己", "✧ 你最好看了", "✾ 吃饭了没",
            "✽ 照顾好自己", "♒ 多喝水", "☺ 记得多笑笑", "✈ 想要的都得到",
            "✵ 身体健康", "♦ 锦鲤附体", "☺ 抱抱你"
        ];
        
        // 背景颜色列表
        const bgColors = [
            '#FFE4E1', '#E0FFE0', '#E0E0FF', '#FFFFE0', '#FFE4FF', '#E0FFFF'
        ];
        
        // 存储所有弹窗元素
        const boxes = [];
        let currentIndex = 0;
        const totalBoxes = 200; // 弹窗总数
        
        // 生成爱心形状的点
        function generateHeartPoints(numPoints) {
            const points = [];
            for (let i = 0; i < numPoints; i++) {
                const t = (i / numPoints) * 2 * Math.PI;
                const x = 16 * Math.pow(Math.sin(t), 3);
                const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
                points.push({x, y});
            }
            return points;
        }
        
        // 缩放并居中爱心点
        function scaleAndCenterPoints(points) {
            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;
            
            const xs = points.map(p => p.x);
            const ys = points.map(p => p.y);
            const minX = Math.min(...xs);
            const maxX = Math.max(...xs);
            const minY = Math.min(...ys);
            const maxY = Math.max(...ys);
            
            const heartWidth = maxX - minX;
            const heartHeight = maxY - minY;
            const margin = 100;
            
            const scaleX = (screenWidth - 2 * margin) / heartWidth;
            const scaleY = (screenHeight - 2 * margin) / heartHeight;
            const scale = Math.min(scaleX, scaleY) * 0.8;
            
            const centerX = screenWidth / 2;
            const centerY = screenHeight / 2;
            
            return points.map(p => {
                return {
                    x: centerX + (p.x - (minX + maxX) / 2) * scale,
                    y: centerY + (p.y - (minY + maxY) / 2) * scale
                };
            });
        }
        
        // 创建随机弹窗
        function createRandomBoxes() {
            if (currentIndex >= totalBoxes) {
                // 随机弹窗阶段结束，1秒后开始组成爱心
                setTimeout(animateToHeart, 500);
                return;
            }
            
            // 创建弹窗元素
            const box = document.createElement('div');
            box.className = 'blessing-box';
            
            // 随机位置
            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;
            const x = Math.random() * (screenWidth - 200) + 100;
            const y = Math.random() * (screenHeight - 100) + 100;
            
            // 随机祝福和背景色
            const blessing = blessings[Math.floor(Math.random() * blessings.length)];
            const bgColor = bgColors[Math.floor(Math.random() * bgColors.length)];
            
            box.style.left = `${x}px`;
            box.style.top = `${y}px`;
            box.style.backgroundColor = bgColor;
            box.textContent = blessing;
            
            document.body.appendChild(box);
            boxes.push(box);
            
            // 2秒后隐藏弹窗
            setTimeout(() => {
                box.classList.add('hidden');
            }, 1000);
            
            currentIndex++;
            // 每隔20ms创建一个新弹窗
            setTimeout(createRandomBoxes, 20);
        }
        
        // 动画：弹窗组成爱心形状
        function animateToHeart() {
            const heartPoints = generateHeartPoints(boxes.length);
            const scaledPoints = scaleAndCenterPoints(heartPoints);
            
            // 显示所有弹窗并移动到爱心位置
            boxes.forEach((box, index) => {
                if (index < scaledPoints.length) {
                    box.classList.remove('hidden');
                    // 计算弹窗位置（使弹窗中心对准爱心点）
                    const x = scaledPoints[index].x - 90; // 180/2
                    const y = scaledPoints[index].y - 45; // 90/2
                    box.style.left = `${x}px`;
                    box.style.top = `${y}px`;
                }
            });
            
            // 爱心形状展示3秒后开始逐个关闭
            setTimeout(closeBoxesOneByOne, 2000);
        }
        
        // 逐个关闭弹窗
        function closeBoxesOneByOne(index = 0) {
            if (index < boxes.length) {
                // 添加淡出动画
                boxes[index].style.opacity = '0';
                boxes[index].style.transform = 'scale(0.5)';
                
                // 动画结束后移除元素
                setTimeout(() => {
                    if (boxes[index].parentNode) {
                        document.body.removeChild(boxes[index]);
                    }
                }, 500);
                
                // 每隔100ms关闭一个
                setTimeout(() => closeBoxesOneByOne(index + 1), 10);
            }
        }
        
        // 启动程序
        window.onload = createRandomBoxes;
    </script>
</body>
</html>